<template>
	<div>
		<SuperTable
	    	ref="table"
	    	path="API_APP_COUPON_LISTS"
	    	:columns="columns"
	    	:params="params"
	    	:loading="true"
	    >
	    	<Button type="primary" slot="header-left" @click="handleGoEdit()">新增优惠券</Button>
	    	<Form slot="header-right" :mode="filterForm" inline @submit.native.prevent>
	    		<FormItem label="类型">
	    			<Select v-model="filterForm.type" style="width: 120px">
	    				<Option v-for="item in types" :value="item.value" :key="item.value">{{ item.label }}</Option>
	    			</Select>
	    		</FormItem>
                <FormItem label="状态">
                	<Select v-model="filterForm.status" style="width: 120px">
	    				<Option :value="-1">全部</Option>
	    				<Option :value="1">已启用</Option>
	    				<Option :value="0">未启用</Option>
	    			</Select>
                </FormItem>
                <FormItem label="关键词">
                    <Input v-model="filterForm.keyword" placeholder="请输入关键词搜索" suffix="ios-search" clearable style="width: 240px"></Input>
                </FormItem>
                <Button type="primary" @click="handleSearch">筛选</Button>
	    	</Form>
	        <div slot-scope="{ row }" slot="action">
	        	<Button type="warning" size="small" @click="handleGoCode(row.id)">查看券码</Button>
	        	<Button type="primary" size="small" @click="handleGoSet(row.id)">发放设置</Button>
	        	<Button type="primary" size="small" @click="handleGoEdit({id: row.id})">编辑</Button>
        		<Poptip
			        confirm
			        transfer
			        placement="left"
			        title="是否确认删除此优惠券？"
			        @on-ok="handleDelete(row.id)"
			    >
			        <Button type="error" size="small">删除</Button>
			    </Poptip>
	        </div>
	    </SuperTable>
	</div>
</template>

<script>
import Util from '@/libs/util.js';
import SuperTable from '@/components/SuperTable.vue';
export default {
	name: 'memberGroup',
	components: {
		SuperTable
	},
	data() {
		return {
			params: {
				keyword: '',
				status: null,
				type: '0',
				page: 1,
				limit: 10
			},
			columns: [
                {
                    title: '优惠券名称',
                    key: 'name',
                    minWidth: 100
                },
                {
                    title: '类型',
                    key: 'type_text'
                },
                {
                    title: '使用门槛',
                    key: 'amount_limit',
                    render: (h, params) => {
                    	if(params.row.amount_limit == 0) {
                    		return h('span', '无门槛');
                    	}
                    	return h('ui-price', params.row.amount_limit);
                    }
                },
                {
                    title: '已领取/总数量',
                    key: 'number',
                    render: (h, params) => {
                    	return h('span', params.row.grant +'/'+ params.row.total);
                    }
                },
                {
                    title: '已使用',
                    key: 'use'
                },
                {
                    title: '面额类型',
                    key: 'discount_text',
                    maxWidth: 100
                },
                {
                    title: '面额',
                    key: 'discount_money',
                    minWidth: 100,
                    maxWidth: 180,
                    render: (h, params) => {
                    	if(params.row.discount_type == 2) {
                    		return h('div', [
                    			h('ui-price', params.row.discount_min),
                    			h('span', ' ~ '),
                    			h('ui-price', params.row.discount_max)
                    		])
                    	}
                    	if(params.row.discount_type == 3) {
                    		return h('span', parseInt(params.row.discount_scale) + '%');
                    	}
                    	return h('ui-price', params.row.discount_scale);
                    }
                },
                {
                    title: '状态',
                    key: 'status',
                    maxWidth: 72,
                    render: (h, params) => {
                    	return h('span', params.row.status ? '进行中' : '已结束');
                    }
                },
                {
                    title: '操作',
                    slot: 'action',
                    align: "center",
                    width: 260
                },
			],
			types: [
				{label: '全部', value: '0'},
				{label: '全场通用', value: '1'},
				{label: '品牌优惠券', value: '2'},
				{label: '分类优惠券', value: '3'},
				{label: '单品优惠券', value: '4'}
			],
			filterForm: {
				keyword: '',
				type: '0',
				status: -1
			},
		}
	},
	mounted() {
		
	},
	methods: {
		// 搜索
		handleSearch() {
			let form = this.filterForm;
			this.params.page = 1;
			this.params.keyword = form.keyword;
			this.params.type = form.type;
			this.params.status = form.status == -1 ? null : form.status;
		},
		// 编辑
		handleGoEdit(query) {
			this.$router.push({name: 'app_market_coupon_edit', query});
		},
		// 删除
		handleDelete(id) {
			Util.ajax.post(this.API['API_APP_COUPON_DELETE'], {id: id}).then(res => {
				this.$Message.success('删除成功');
				this.$refs.table.init();
			}).catch(() => {
				
			})
		},
		// 查看券码
		handleGoCode(id) {
			this.$router.push({name: 'app_market_coupon_code', query: {id: id}});
		},
		// 发放设置
		handleGoSet(id) {
			this.$router.push({name: 'app_market_coupon_set', query: {id: id}});
		},
	}
}
</script>